<template>
  <view class="page-view">
    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        报警信息
        <view class="header-wrap">
          <uni-data-picker v-model="regionId" class="selectName" clear-icon :localdata="dataTree"
            :map="{text: 'departName', value:'id'}" @change="onchange" @nodeclick="nodeClick"
            @popupclosed="popupclosed">
            <view class="dataPickerInput">
              {{ areaName }}
              <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
            </view>
          </uni-data-picker>
          <view class="selectName" style="width: 126rpx" @click="openPicker('typeShow')">
            {{typeText}}
            <image class="arrow" style="margin-left: 5rpx" src="../../static/icon/icon-bottom-arrow.png" mode="">
            </image>
          </view>
          <view class="item_search">
            <u-search shape="round" v-model="timeStr" bgColor="#f2f7f5" height="53"
              style="pointer-events: none;font-size: 24rpx;" searchIcon="calendar" searchIconSize="26" placeholder="日期"
              :show-action="false" :disabled="true" @click="dateShow = true" @change="clearValue">
            </u-search>
            <image v-if="clearsDateShow" class="clearImg" src="@/static/login/clear.png" @click="onClearsDate"></image>
          </view>
        </view>
      </u-sticky>
    </view>
    <view class="posBox" v-if="policeList.length">
      <view class="list-wrap" :style="{ height: 'calc(100vh - 298rpx)' }">
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleGetMore">
          <view v-for="(item, index) in policeList" :key="index">
            <view class="task-item" @click="goToDetail(item)">
              <view class="titleName">
                <view class="" style="display: flex;align-items: center;flex-wrap: wrap">
                  <view class="line"></view>
                  {{item.policeName}}
                </view>
              </view>
              <view class="info-row"> <text>报警详情</text><span>{{ item.detail }}</span></view>
              <view class="info-row"> <text>报警区域</text>{{ item.areaName }}</view>
              <view class="info-row"> <text>报警位置</text>{{ item.pointPosName }}</view>
              <view class="info-row"><text>报警时间</text>{{ item.policeTime }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <van-empty v-else description="暂无数据" />
    <!-- columns1 -->
    <u-picker :show="typeShow" keyName="text" :columns="[policeTypeList]" @confirm="bindPickerChange1"
      @cancel="typeShow=false"></u-picker>
    <van-calendar :show="dateShow" ref="calendar" :maxDate="maxDate" :minDate="minDate" monthNum="24" rowHeight="55"
      :defaultDate="defaultDate" title="选择时间" type="range" color="rgba(39, 105, 247, 1)" @confirm="dateConfirm"
      @close="dateClose">
    </van-calendar>

  </view>
</template>
<script>
import { getAreaTreeList } from '@/api/area'
import { getNodePath } from '@/utils/treeOperate'
import { getDictItemInfo } from '@/api/system.js';
import { getHistoryPolice, getDictData } from '@/api/manage.js';

export default {
  filters: {
    showTastStatusText() {
      return '--';
    },
    filterDate(dateStr) {
      if (dateStr) {
        dateStr = dateStr.replaceAll('-', '/');
        return new Date(dateStr).format('yyyy-MM-dd');
      } else {
        return '';
      }
    },
  },
  data() {
    return {
      defaultDate: [],
      getNodePath,
      regionId: '',
      areaText: false,
      columns1: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '日常运维',
          value: '1'
        },
        {
          name: '工单处理',
          value: '2'
        },
        {
          name: '水质检测',
          value: '3'
        },
        {
          name: '公众反馈',
          value: '4'
        }],
      columns2: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '未处理',
          value: '1'
        },
        {
          name: '已处理',
          value: '2'
        }],
      timeStr: '',
      equTypeList: [],
      typeShow: false,
      statusShow: false,
      typeValue: '',
      statusValue: '',
      typeText: '报警类型',
      // statusText: '全部',
      areaText: '区域',
      clearsDateShow: false,
      startTime: '',
      endTime: '',
      dateShow: false,
      maxDate: new Date().valueOf(),
      minDate: new Date('2024-01-01').getTime(),
      policeList: [],
      total: null,
      pageNo: 1,
      pageSize: 10,
      params: {
        status: '',
        woType: '',
        areaId: '1698943710333108226',
        areaName: '永康开发区',
        column: 'createTime',
        order: 'desc',
      },
      policeList: [
        // {
        //   equtype: "液位计",
        //   name: '汪家村农污终端进口液位计',
        //   equNo: '458793214569',
        //   drain: 1,
        //   wtType: '液位报警',
        //   wtDetail: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   time: '2024.06.07 08:50'
        // }, {
        //   equtype: "液位计",
        //   name: '汪家村农污终端进口液位计',
        //   equNo: '458793214569',
        //   drain: 1,
        //   wtType: '液位报警',
        //   wtDetail: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   time: '2024.06.07 08:50'
        // }, {
        //   equtype: "液位计",
        //   name: '汪家村农污终端进口液位计',
        //   equNo: '458793214569',
        //   drain: 1,
        //   wtType: '液位报警',
        //   wtDetail: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   time: '2024.06.07 08:50'
        // }
      ],
      taskList: [],
      policeTypeShow: false,
      woType: '',
      dataTree: [],
      areaName: '',
      regionIdCopy: '',
      policeTypeList: []
    };
  },
  onLoad(query) {
    console.log(query, 'query--传递参数')
    const { areaId, status, statusName,
      startTime, endTime
    } = query
    this.regionId = areaId
    if (startTime && endTime) {
      this.dateConfirm({ detail: [startTime, endTime] })
    }
    if (status) {
      this.statusValue = status
      this.statusText = statusName
      const e1 = {
        value: [
          { value: status, name: statusName }
        ]
      }
      this.bindPickerChange2(e1)
    } else {
      this.getHistoryPolice(areaId)
    }
    this.$nextTick(() => {
      setTimeout(async () => {
        this.areaName = await this.getAddressName(areaId)
        console.log(this.regionId, this.areaName, '接收到区域id')
      }, 1000)
    })
  },
  created() {
    this.getAreaTree()
    this.getDictData()
  },
  mounted() { },
  methods: {
    clearValue(value) {
      console.log(value, 'change-value')
      if (!value) this.onClearsDate()
    },
    /** 获取报警类型字典列表 */
    async getDictData() {
      const res = await getDictData({ dictId: '1646420988638429186', pageNo: 1, pageSize: 100 })
      this.policeTypeList = [{ text: '全部', value: '' }].concat(res.data.result.records.map(item => {
        return { value: item.itemValue, text: item.itemText }
      }))
      console.log(this.policeTypeList, 'policeTypeList')
    },
    openPicker(visibleName) {
      console.log('点击', visibleName)
      this[visibleName] = true
    },
    getAddressName(regionId) {
      console.log(this.dataTree, ' this.dataTree-此时有树吗')
      const i = getNodePath({ id: regionId }, this.dataTree).length - 1
      return getNodePath({ id: regionId }, this.dataTree)[i]
    },
    nodeClick(e) {
      console.log('节点被点击', this.regionId, e)
      this.resetSearch()
      const { id, departName } = e
      this.areaName = departName
      this.regionIdCopy = id
      // this.regionId = id
      // this.areaName = this.getAddressName(id)
      // setTimeout(() => {
      this.getHistoryPolice(id)
      // }, 300)
    },
    popupclosed() {
      if (this.regionIdCopy) this.regionId = this.regionIdCopy
    },
    onchange() { },
    /** 获取区域树 */
    async getAreaTree() {
      const res = await getAreaTreeList()
      this.dataTree = res.data.data
      console.log(this.dataTree, 'tree--获取到选择区域树')
    },
    goToBack() {
      //  uni.navigateTo({
      //  			  url:'/pages/home/home'
      //  })
      uni.navigateBack()
    },
    goToDetail(item) {
      // console.log(i,'6.30');
      uni.navigateTo({
        // url:`/subpack_TerminalDevice/yunweiDetail/index?type=`+i
        url: `/subpack_TerminalDevice/yunweiDetail/index?type=${item.type}&id=${item.missionId}`

      })
    },
    async getHistoryPolice(areaId) {
      // const areaId = uni.getStorageSync('areaId')
      // const areaId = this.regionId
      const res = await getHistoryPolice({
        areaId,
        startTime: this.startTime,
        endTime: this.endTime,
        // status: this.statusValue,
        policeType: this.typeValue,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      this.policeList = this.policeList.concat(res.data.data.records)
      this.total = res.data.data.total
      console.log(res.data, this.policeList, '7.1');
    },
    // 重置表格查询条件
    resetSearch() {
      this.policeList = []
      this.pageNo = 1
      this.total = 0
    },
    dateConfirm(e) {
      this.resetSearch()
      this.defaultDate = e.detail
      this.startTime = new Date(e.detail[0]).format('yyyy-MM-dd')
      this.endTime = new Date(e.detail[e.detail.length - 1]).format('yyyy-MM-dd')
      this.timeStr = this.startTime && this.endTime ? this.startTime + '~' + this.endTime : ''
      this.dateShow = false
      this.clearsDateShow = true
      this.getHistoryPolice(this.regionId)
    },
    dateClose() {
      this.dateShow = false
    },
    onClearsDate() {
      this.resetSearch()
      this.defaultDate = []
      this.timeStr = ''
      this.startTime = ''
      this.endTime = ''
      this.clearsDateShow = false
      this.dateShow = false
      this.getHistoryPolice(this.regionId)
    },
    bindPickerChange1: function (e) {
      this.resetSearch()
      console.log(e.value[0], '20257.1');
      this.typeValue = e.value[0].value;
      this.typeText = e.value[0].text;
      this.typeShow = false
      this.getHistoryPolice(this.regionId)
    },
    bindPickerChange2: function (e) {
      this.resetSearch()
      console.log(e, 'eeeeeeeeeeee')
      this.statusValue = e.value[0].value;
      this.statusShow = false;
      this.statusText = e.value[0].name
      this.getHistoryPolice(this.regionId)
    },
    handleGetMore() {
      this.pageNo++;
      if (this.total && this.policeList.length >= this.total) {
        return;
      }
      console.log('触底')
      // this.handleGetTaskList();
      this.getHistoryPolice(this.regionId)

    }
  },
};
</script>
<style scoped lang="scss">
.page-view {
  --calendar-popup-height: 67%;
  ::v-deep .van-popup {
    z-index: 999 !important;
  }
  ::v-deep .van-overlay {
    z-index: 998 !important;
  }
  height: 100vh;
  // background: #f8f9fb;
  position: relative;
  overflow: hidden;
}
.posBox {
  position: absolute;
  top: 260rpx;
}
.top-bg {
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }
}
.header-wrap {
  // position: relative;
  padding: 0 32rpx;
  margin-top: 32rpx;
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 32rpx;
  font-weight: bold;
  font-size: 28rpx;
  margin-left: 8rpx;
  letter-spacing: 1rpx;
  .item_search {
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    width: 56%;
    position: relative;
    .clearImg {
      position: absolute;
      width: 25rpx;
      height: 25rpx;
      right: 8rpx;
      bottom: 16rpx;
    }
    ::v-deep .u-search__content__input {
      font-size: 24rpx;
    }
  }
  .selectName {
    width: 180rpx;
    height: 56rpx;
    padding: 0 10rpx;
    line-height: 56rpx;
    background: #f2f6f7;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    margin-right: 8rpx;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0;
    .arrow {
      width: 16rpx;
      height: 10rpx;
      vertical-align: middle;
      margin-left: 30rpx;
    }
  }

  .dataPickerInput {
    // width: calc(100% - 48rpx);
    // height: 88rpx;
    background: #fff;
    color: #4a4a4a;
    // padding-left: 24rpx;
    padding-right: 10rpx;
    text-align: left;
    font-size: 24rpx;
    // line-height: 88rpx;
    // border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    align-items: center;
    line-height: 56rpx;
    height: 56rpx;
    position: relative;
    .arrow {
      width: 16rpx;
      height: 10rpx;
      vertical-align: middle;
      margin-left: 0;
      position: absolute;
      right: 10rpx;
    }
  }
}
.scroll-Y {
  height: 100%;
}

.task-item {
  width: 636rpx;
  // height: 556rpx;
  position: relative;
  margin: 16rpx 32rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  padding: 16rpx 24rpx 30rpx 28rpx;
  font-weight: bold;
  font-size: 24rpx;
  .statusIcon {
    width: 20rpx;
    height: 20rpx;
    margin: 10rpx 12rpx;
    vertical-align: middle;
  }
  .statusIconHandle {
    position: absolute;
    right: 12rpx;
    top: 50%;
    transform: translate(0, -50%);
    width: 120rpx;
    height: 120rpx;
    // background: #d5efdd;
    // border-radius: 10rpx 0rpx 10rpx 0rpx;
    // font-weight: bold;
    // font-size: 20rpx;
    // color: #66c463;
    // white-space: nowrap;
  }
  .successBg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120rpx;
    height: 40rpx;
    background: #d5efdd;
    border-radius: 10rpx 0rpx 10rpx 0rpx;
    font-weight: bold;
    font-size: 20rpx;
    color: #66c463;
    white-space: nowrap;
  }
  .errorBg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120rpx;
    height: 40rpx;
    background: #ffebef;
    border-radius: 10rpx 0rpx 10rpx 0rpx;
    font-weight: bold;
    font-size: 20rpx;
    color: #fc8382;
    white-space: nowrap;
  }
}
.titleName {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34rpx;
  font-size: 28rpx;
  .line {
    width: 8rpx;
    height: 20rpx;
    background: rgba(39, 105, 247, 0.6);
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    margin-right: 14rpx;
  }
  .grey {
    font-weight: 400;
    font-size: 18rpx;
    color: #989898;
    margin-left: 12rpx;
    white-space: nowrap;
  }
  .type {
    width: 102rpx;
    height: 40rpx;
    background: #f2e5ff;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    line-height: 40rpx;
    text-align: center;
    ont-weight: bold;
    font-size: 20rpx;
    color: #903cff;
  }
  .type2 {
    background: #d5efe7;
    color: #74cdaf;
  }
  .type3 {
    background: #e5eeff;
    color: #3c8aff;
  }
  .type4 {
    background: #fbf2d1;
    color: #fbb322;
  }
}
.info-row2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.info-row3 {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.info-row {
  color: #5e5e5e;
  margin-bottom: 14rpx;
  width: 540rpx;
  margin-left: 22rpx;
  display: flex;
  span {
  }
  text {
    margin-right: 16rpx;
    width: 18%;
    color: #989898;
    display: inline-block;
    white-space: nowrap;
  }
  .isIssue1 {
    display: inline-block;
    width: 96rpx;
    height: 36rpx;
    background: #d5efdd;
    font-weight: bold;
    font-size: 20rpx;
    color: #66c463;
    line-height: 36rpx;
    text-align: center;
  }
  .isIssue2 {
    display: inline-block;
    width: 96rpx;
    height: 36rpx;
    background: #ffebef;
    font-weight: bold;
    font-size: 20rpx;
    color: #fc8382;
    line-height: 36rpx;
    text-align: center;
  }
}
.btn-item {
  position: absolute;
  right: 26rpx;
  bottom: 32rpx;
  width: 168rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  background: #3c8aff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  cursor: pointer;
  font-weight: 400;
  color: #fff;
}
.title {
  text-align: center;
  margin-top: 32rpx;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
}
.infoBox {
  margin: 32rpx 24rpx 0 24rpx;
  font-weight: bold;
  font-size: 24rpx;
  text {
    width: 19%;
  }
}
.submitBtn {
  margin: 132rpx 48rpx 32rpx 48rpx;
}
::v-deep .u-input--radius {
  // width: 324rpx;
  // height: 60rpx;
  background: #f2f6f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
::v-deep .u-search__content {
  padding: 0 10rpx !important;
}
</style>
